import React from 'react';
import {Input, Form, /*DatePicker,*/ Row, Col, Select} from 'antd';

import RCModal from '@components/modal/index.jsx';
import {activityType, partyBranch} from '@assets/config/global.js';

import './scss/parter_active.modal.scss';

const FormItem = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;

class ParterActiveModal extends React.Component {

    componentDidMount() {
        this.props.form.validateFields();
    }

    // 判断是否可以提交
    hasErrors(fieldsError) {
        let disabled = Object.keys(fieldsError).some(field => fieldsError[field]);
        return disabled;
    }

    // 保存按钮
    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        formInfo.orgId = formInfo.orgId.join(',');
        this.props.submitForm(formInfo);
        this.props.form.resetFields();
    }

    // 取消按钮
    onCancel() {
        this.props.form.resetFields();
        this.props.cancelForm();
    }

    render() {

        let {modalVisible = false, showFooter = false, data = {}} = this.props;

        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        };
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const rules = [{required: true, message: '必填项！'}];

        const activeTypeError = isFieldTouched('activityType') && getFieldError('activityType');// 活动类型不能为空
        const activeNameError = isFieldTouched('name') && getFieldError('name');// 活动名称不能为空
        const activeThemeError = isFieldTouched('topic') && getFieldError('topic');// 活动主题不能为空
        const activePosError = isFieldTouched('site') && getFieldError('site');// 活动地点不能为空
        const activeTimeError = isFieldTouched('time') && getFieldError('time');// 活动地点不能为空
        const activeIntrError = isFieldTouched('introduction') && getFieldError('introduction');// 活动地点不能为空

        return (
            <RCModal
                title='组织活动'
                footerText={{okText: '保存'}}
                showFooter={showFooter}
                visible={modalVisible}
                disabled={this.hasErrors(getFieldsError())}

                onOk={this.submitForm.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form layout="horizontal">
                    <div className="parter-active-modal modal-content">
                        <Row>
                            <Col span={24}>
                                <FormItem label='活动类型' {...formItemLayout}
                                          validateStatus={activeTypeError ? 'error' : ''}
                                          help={activeTypeError || ''}
                                >
                                    {
                                        getFieldDecorator('activityType', activityType[data.activityType] ? {
                                            initialValue: data.activityType,
                                            rules
                                        } : {rules})(
                                            <Select style={{width: '100%'}} placeholder="请选择"
                                                onChange={(val) => console.log(val)}
                                            >
                                                {
                                                    Object.keys(activityType).map((item, index) => {
                                                        return (<Option value={activityType[item].id} key={index}>{activityType[item].name}</Option>)
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='活动名称' {...formItemLayout}
                                          validateStatus={activeNameError ? 'error' : ''}
                                          help={activeNameError || ''}
                                >
                                    {
                                        getFieldDecorator('name', {initialValue: data.name || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='活动主题' {...formItemLayout}
                                          validateStatus={activeThemeError ? 'error' : ''}
                                          help={activeThemeError || ''}
                                >
                                    {
                                        getFieldDecorator('topic', {initialValue: data.topic || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='活动地点' {...formItemLayout}
                                          validateStatus={activePosError ? 'error' : ''}
                                          help={activePosError || ''}
                                >
                                    {
                                        getFieldDecorator('site', {initialValue: data.site || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={24} className='constom-height'>
                                <FormItem label='参与党组织' {...formItemLayout}>
                                    {
                                        getFieldDecorator('orgId', {
                                            initialValue: data.orgId ? data.orgId.split(',') : []
                                        })(
                                            <Select mode="multiple" placeholder="请选择"
                                                onChange={(val) => console.log(val)}
                                            >
                                                {
                                                    Object.keys(partyBranch).map((item, index) => {
                                                        return (
                                                            <Option value={partyBranch[item].orgId} key={index}>{partyBranch[item].name}</Option>
                                                        )
                                                    })
                                                }
                                            </Select>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={24}>
                                <FormItem label='活动时间' {...formItemLayout}
                                          validateStatus={activeTimeError ? 'error' : ''}
                                          help={activeTimeError || ''}
                                >
                                    {
                                        getFieldDecorator('time', {initialValue: data.time || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={24}>
                                <FormItem label='活动简介' {...formItemLayout}
                                          validateStatus={activeIntrError ? 'error' : ''}
                                          help={activeIntrError || ''}
                                >
                                    {
                                        getFieldDecorator('introduction', {initialValue: data.introduction || '', rules})(
                                            <TextArea rows={4} placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </RCModal>
        )
    }
}

ParterActiveModal = Form.create({})(ParterActiveModal);
export default ParterActiveModal;